Contentfulの多言語化対応パターン解説 - 4つの実装方式の特徴と使い分け
2024.12.05Contentfulは手軽に多言語化対応できるHeadless CMSです。
この記事では、Contentfulにおける国際化対応のパターンについて解説します。
前提
前提とする既存ブログについてです。
Content modelのblogは次の通りシンプルな構成です。
| Name | Field Type | required | その他 |
|---|---|---|---|
| title | Short text | true |
Entry title |
| body | Rich text | true |
Contentfulでの多言語化対応における設定項目
Contentfulで多言語化対応する場合、Localeを使うことになります。
Localesは必ず1つDefaultのlocaleを設定する必要があります。
そしてContent modelのField optionsでは、項目によっては多言語対応の設定ができます。この設定が有効になっているフィールドのみ、多言語対応の対象となります。
またDefaultにはならない言語については、その挙動を選択できます。
ここで多言語対応のパターンについて整理してみましょう。
パターン1. 多言語化対象の項目がrequiredで多言語でも空を許可しない
多言語化対象の項目がrequiredで、Locale settingsのAllow required fields to be empty for this localeを指定しなかった場合、すべての言語での入力が必須になります。そのためフロントエンド側では特に意識することなくデータの取得が可能です。
- メリット
- フロントエンドの実装がシンプルで、すべて翻訳済みのデータを提供できる
- デメリット
- 多言語対応するすべての項目で入力が必須となる
パターン2. 多言語化対象の項目がrequiredで多言語でも空を許可し、Fallbackの言語を指定する
Locale settingsのAllow required fields to be empty for this localeを指定した場合、requiredの項目であってもデフォルト言語以外の言語では入力を省略することが可能になります。そしてその項目を省略したときには、Fallback localeで指定した言語のコンテンツが取得できます。
このとき、レスポンスのsys.localeはリクエストをした言語と同じ値になります。
例えばデフォルト言語が日本語で、locale=en-USでリクエストしたときに英語が用意されていない場合、レスポンスは簡略化した例となりますが次のようになります。
{
"items": [
{
"sys": { "locale": "en-US" },
"fields": { "title": "日本語タイトルの例" }
}
]
}
titleはFallbackされた日本語で戻されていますが、sys.localeはen-USとなり、これがフォールバックされた言語なのかどうかを知る値がありません。
このためフロントエンド側の実装では、lang属性を正しく設定するためにlocale=en-USではなくlocale=*で全言語をリクエストし、すべての言語を取得してから多言語記事の存在チェックをする必要があります。
- メリット
- すべての項目を翻訳する必要がない
- デメリット
- 正しいlang属性の設定のためにすべての言語を取得する必要がある
パターン3. 多言語化対象の項目がrequiredで多言語でも空を許可し、Fallbackの言語を指定しない
こちらは先程の例でFallback localeを指定しなかった場合になります。Fallbackされない場合にはそのコンテンツを含めずに返されます。そのため翻訳する記事が存在しないとき表示しないのであれば、この方法が良さそうです。
{
"items": []
}
- メリット
- デフォルトの言語は必ず存在し、翻訳対象の言語がない場合にはページ自体存在しなくてもよい場合に最適
- デメリット
- 翻訳がない場合、一覧で翻訳されていない言語が表示されないので利用シーンが限定される
パターン4. 多言語化対象の項目が任意
多言語化対象の項目を任意にすることは、デフォルト言語のコンテンツを用意することなく、翻訳言語のコンテンツのみ存在させることのできる唯一の手段です。
リクエスト時に本来requiredであってほしい項目の入力漏れがあったときにレスポンスから除外したいような場合にはfields.title[exists]=trueやfields.body[exists]=trueといったようなクエリを追加することで実現可能です。
- メリット
- デフォルトの言語を用意することなく、翻訳言語のみ存在させることができる
- デメリット
- 本来requiredである項目からrequiredを外すことになるため、記載漏れが発生し得る
まとめ
| パターン | 必須入力 | Fallback | 主なユースケース |
|---|---|---|---|
| 1 | 全言語 | なし | 完全な多言語対応 |
| 2 | デフォルト言語のみ | あり | デフォルト言語を主とした多言語対応 |
| 3 | デフォルト言語のみ | なし | デフォルト言語を主とした言語別に独立したコンテンツ |
| 4 | なし | なし（設定不可） | それぞれの言語別に独立したコンテンツ |
Contentfulでの多言語化対応には大きく4つのパターンがあります。目的にあったパターンを選択することももちろん大切ですが、言語対応方針の段階的な移行も可能なので柔軟に対応できるサービスです。
